<template>
  <h1>计算器练习</h1>
  <input type="text" placeholder="请输入数字1" v-model="num1">
  <input type="text" placeholder="请输入数字2" v-model="num2">

  <hr>

  <button @click="cli('+')">加</button>
  <button @click="cli('-')">减</button>
  <button @click="cli('*')">乘</button>
  <button @click="cli('/')">除</button>

  <h4>运算结果: <span>{{ jg }}</span></h4>

</template>
<script setup>

import {ref} from "vue";

const num1 = ref('');
const num2 = ref('');
let jg = ref('')

const cli = (str) => {
  jg.value = eval(num1.value + str + num2.value);
  // const number1 = parseFloat(num1.value);
  // const number2 = parseFloat(num2.value);
  // if (isNaN(number1) || isNaN(number2)) {
  //   alert("请输入数字")
  //   return;
  // }
  // switch (str) {
  //   case '+':
  //     jg.value = number1 + number2;
  //     break;
  //   case '-':
  //     jg.value = number1 - number2;
  //     break;
  //   case '*':
  //     jg.value = number1 * number2;
  //     break;
  //   case '/':
  //     if (number2 === 0) {
  //       alert('被除数不能为零')
  //     }
  //     jg.value = number1 / number2;
  //     break;
  // }
  num1.value=''
  num2.value=''

}

</script>


<style scoped>

</style>